<template>
  <table class="table table-bordered table-stripped">
    <!-- 表格标题区域 -->
    <thead>
      <tr>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </tr>
    </thead>
    <!-- 表格主体区域 -->
    <tbody>
      <tr v-for="item in arr" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.goods_name }}</td>
        <td>{{ item.goods_price }}</td>

        <td>
          <button
            :style="Mystyle"
            @click="$emit('AddTag', (item.inputVisible = true))"
            v-show="item.inputVisible === false"
          >
            +Tag
          </button>
          <input
            type="text"
            v-if="item.inputVisible"
            v-custom="[item.tags, item.inputValue]"
            @blur="item.inputVisible = false"
            v-model="item.inputValue"
            :style="{ width: '80px', height: '26px' }"
          />
          <br />
          <!-- 标签input框 -->
          <span
            :style="mystyles"
            v-for="(items, index) in item.tags"
            :key="index"
          >
            <span
              :style="{ position: 'relative', cursor: 'default' }"
              @mouseenter="dis"
              @mouseleave="disr"
            >
              {{ items }}
              <i
                class="a"
                @click="Del(item.tags, index)"
                :style="{ cursor: 'pointer', display: 'none' }"
                ref="lis"
                >x</i
              >
            </span>
          </span>
        </td>
        <td><slot :btns="item.id"></slot></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'MyTable',
  props: ['arr', 'Mystyle'],
  data() {
    return {
      names: '',
      display: false,
      mystyles: {
        backgroundColor: '#fec107',
        margin: '5px',
        padding: '2px',
        height: '25px',
        display: 'inline-block',
        textAlign: 'center',
        border: '#ec4341',
        borderRadius: '10%',
      },
    }
  },
  methods: {
    Del(item, b) {
      item.splice(b, 1)
    },
    dis(e) {
      e.target.firstElementChild.style.display = 'block'
    },
    disr(e) {
      e.target.firstElementChild.style.display = 'none'
    },
  },
}
</script>

<style scoped lang="less">
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
}
.a {
  position: absolute;
  font-size: 12px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  line-height: 10px;
  text-align: center;
  background-color: red;
  color: aliceblue;
  top: -8px;
  right: -6px;
}
</style>
